<template>
  <div :id="elId">

  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {sysUuid} from 'tscommon/ts/ext';
import {LoadJS} from 'tscommon/ts/dom.ext';
import Global from 'system.global';
let isLoad=false;
export default Vue.extend({
  data(){
    return {
      elId:sysUuid(),
      chart:null as null|G2Chart
    }
  },
  beforeCreate(){
    if(!isLoad){
      isLoad= true;
      LoadJS('g2Report','https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.2/dist/g2.min.js');
    }
  },
  props:{
    width:{
      type:Number,
      default:600
    },
    height:{
      type:Number,
      default:300
    },
    data:{
      type:Object,
      required:true
    },
    type:{
      type:String,
      default:'interval'
    },
    position:{
      type:String,
      required:true
    },
    color:{
      type:String
    },
    handle:{
      type:Function
    },
    padding:<any>{
      type:Array,
      default(){
        return [10,10,30,50];
      }
    }
  },
  mounted(){
    this.init();
  },
  methods:{
    init(){
      if(Global().G2==null){
        setTimeout(()=>{this.init()},200);
        return;
      }else{
        G2.track(false);
      }
      this.chart = new G2.Chart({
        container: this.elId,
        width : this.width,
        height : this.height,
        padding: this.padding
      });
      this.chart.source(this.data);
      if(this.type=='intervalStack'){
        this.chart.coord('theta', {
          radius: 1,
          innerRadius: 0.6
        });
        this.chart.legend(false);
      }
      const p = (<any>this.chart)[this.type]().position(this.position);
      if(this.color!=null){
        p.color(this.color);
      }
      if(this.handle!=null){
        this.handle({chart:this.chart,p});
      }
      this.chart.render();
    }
  },
  watch:{
    height(){
      if(this.chart==null)return;
      this.chart.changeHeight(this.height);
    },
    width(){
      if(this.chart==null)return;
      this.chart.changeWidth(this.width);
    },
    data(){
      if(this.chart==null)return;
      this.chart.changeData(this.data);
    }
  }
})
</script>
